<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .active {
                color: #ff0000;
            }
            .big {
                font-weight: bolder;
                font-size: 64px;
            }
            .bg {
                width: 500px;
                height: 500px;
                background-color: blue;
            }
            .base {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="myApp">
            <div v-bind:class="[activeClass,bigClass,{bg:isBg}]">红色文本</div>
            <div v-bind:class="arrClasses">红色文本</div>
            <div v-bind:class="myClass">红色文本</div>
            <div class="base" v-bind:class="myClass">红色文本</div>
            <button v-on:click="btnClick">改变class吧</button>
        </div>
    </body>

    <script type="text/javascript">
        /* 
            样式绑定相关语法细节：
            1.对象绑定和数组绑定可以结合使用
            2.class绑定的值可以简化操作
            3.默认的class如何处理
        */

        var myApp = new Vue({
            el: '#myApp',
            data: {
                activeClass: 'active',
                bigClass: 'big',
                isBg: true,
                arrClasses: ['active', 'big'],
                myClass: {
                    active: true,
                    big: true
                }
            },
            methods: {
                btnClick: function() {
                    this.activeClass = '';
                    this.bigClass = '';
                    this.isBg = !this.isBg;
                }
            }
        });
    </script>
</html>
